<!DOCTYPE html>
<!-- saved from url=(0051)http://data.auto.sina.cn/carlibrary/search.php?vt=4 -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta name="keywords" content="手机绍兴在线,绍兴在线,汽车在线,房产在线,旅游在线,媒体在线">
    <meta name="description" content="">
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?type=quick&ak=QleFqxAthzzZOoIXTFGb8Q4C&v=1.0"></script>

    <style>
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }

        #golist {
            display: none;
        }

        @media (max-device-width: 780px) {
            #golist {
                display: block !important;
            }
        }

        a:link, a:visited {
            text-decoration: none;
        }

        /*返回页面*/
        #back-header {
            height: 31px;
            line-height: 31px;
            font-size: 15px;
            padding: 7px 10px;
            background-color: #f8f8f8;
        }

        .back-h-l {
            float: left;
        }

        .back-h-r {
            float: right;
        }

        .back-h-l a {
            color: #222;
        }

        .vici {
            position: absolute;
            right: 10px;
            top: 40px;
            box-shadow: 0 0 5px #626160;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.7);
            height: 38px;
            overflow: hidden;
            width: 297px;
            -webkit-transition: 0.2s all ease;
            z-index: 100
        }

        .vici .more {
            float: right;
            width: 36px;
            height: 36px;
            border-radius: 5px;
            border: 1px solid #fff;
            background: url(__PUBLIC__/img/Home/Map/map-vici.png) center no-repeat rgba(0, 0, 0, 0.6);
            background-size: auto 18px;
        }

        .vici .iconbox {
            overflow: hidden;
        }

        .vici .iconbox a {
            float: left;
            margin: 1px 0 0 1px;
            width: 36px;
            height: 36px;
            text-indent: -1000em;
            font-size: 0;
        }

        .vici .iconbox a span {
            display: block;
            margin: 6px;
            width: 24px;
            height: 24px;
            background: url(__PUBLIC__/img/Home/Map/icon-vici.png) no-repeat;
            background-size: auto 48px;
        }

        .vici .iconbox .bus span {
            background-position: 0 0;
        }

        .vici .iconbox .subway span {
            background-position: -24px 0;
        }

        .vici .iconbox .school span {
            background-position: -48px 0;
        }

        .vici .iconbox .hospital span {
            background-position: -72px 0;
        }

        .vici .iconbox .bank span {
            background-position: -96px 0;
        }

        .vici .iconbox .shop span {
            background-position: -120px 0;
        }

        .vici .iconbox .house span {
            background-position: -144px 0;
        }

        .vici .iconbox .bus.active span {
            background-position: 0 -24px;
        }

        .vici .iconbox .subway.active span {
            background-position: -24px -24px;
        }

        .vici .iconbox .school.active span {
            background-position: -48px -24px;
        }

        .vici .iconbox .hospital.active span {
            background-position: -72px -24px;
        }

        .vici .iconbox .bank.active span {
            background-position: -96px -24px;
        }

        .vici .iconbox .shop.active span {
            background-position: -120px -24px;
        }

        .vici .iconbox .house.active span {
            background-position: -144px -24px;
        }

        .bor{
            position: absolute; width: 150px; bottom: 20px; margin-left: -82px; padding: 5px; border: 1px solid #666; border-radius: 1px; color: #333; background-color: #fff; line-height: 18px; font-size: 12px;
        }
    </style>

    <title>返回</title>

</head>

<body>
<div id="back-header">
    <div class="back-h-l">
        <a href="javascript:history.back(-1);"><i class="header-icon-l"></i>返回</a>
    </div>
    <div class="back-h-r">
        <span>{$HouseName}</span>
    </div>
</div>
<!--end #back-header-->
<div id="allmap" class="allmap"></div>

<form style="display:none" action="javascript:void(0)" method="get">
    <textarea id="searchDetail">&lt;div class="bor"&gt;&lt;h5&gt;&lt;strong&gt;{title}&lt;/strong&gt;&lt;/h5&gt;&lt;p&gt;{address}&lt;/p&gt;&lt;/div&gt;</textarea></form>

<div style="position: absolute; z-index: 1001; display: none; opacity: 1; left: 190px; top: 217px;" id="maptip">
    <div class="bor">
        <h5><strong></strong></h5>
        <p></p>
    </div>
</div>

<div id="show_msg" style="position: absolute; top: 50px; left: 0px; padding: 2px 0px; width: 100%; text-align: center; font-size: 12px; color: rgb(255, 255, 255); z-index: 20; display: none; background: rgba(0, 0, 0, 0.6);"><a href="javascript:void(0);" class="info" id="prompt" style="color: rgb(255, 255, 255); display: inline;">当前区域暂无地铁信息</a></div>

<div class="vici" style="top: 90px; width: 297px;">
    <a href="javascript:;" class="more" id="hide_vici" style="background-color: rgba(71,132,212,0.6);"></a>

    <div class="iconbox js_searchType" id="search_wrap" style="display: block;">
        <a href="javascript:void(0)" class="bus" id="js_searchBus" flag="0"><span>公交</span></a>
        <a href="javascript:void(0)" class="subway" id="js_searchSubway" flag="0"><span>地铁</span></a>
        <a href="javascript:void(0)" class="school" id="js_searchSchool" flag="0"><span>学校</span></a>
        <a href="javascript:void(0)" class="hospital" id="js_searchHospital" flag="0"><span>医院</span></a>
        <a href="javascript:void(0)" class="bank" id="js_searchBank" flag="0"><span>银行</span></a>
        <a href="javascript:void(0)" class="shop" id="js_searchShop" flag="0"><span>购物</span></a>
        <a href="javascript:void(0)" class="house" id="js_searchHouse" flag="0"><span>房屋</span></a></div>
</div>
</div>
<!--end #container-->
<script src="__PUBLIC__/js/zepto.min.js"></script>
<script type="text/javascript">

    (function ($) {

        //这里调用一个查询百度API的过程
        var search_arr = {bus:'公交', subway:'地铁', school:'学校', hospital:'医院', bank:'银行', shop:'购物',house:'楼盘'};
        var icon_arr = {bus:'1', subway:'2', school:'3', hospital:'4', bank:'5', shop:'6',house:'7'};
        var search_arr_marker = [];
        var openTip = [];
        var LonLat = "{$LonLat}";
       var lonlatArr =  LonLat.split(",");
        // 百度地图API功能
        var pointHouse = new BMap.Point(lonlatArr[0],lonlatArr[1]);

        var map = new BMap.Map("allmap");
        map.centerAndZoom(pointHouse, 16);
        map.addControl(new BMap.ZoomControl());  //添加地图缩放控件

        var marker1 = new BMap.Marker(pointHouse);  //创建标注
        map.addOverlay(marker1);

        //对筛选框进行控制
        var hide_vici = 0;
        $('#hide_vici').on('click', function () {
            if (hide_vici == 0) {
                $('#search_wrap').hide();
                $('.vici').css('width', '36px');
                hide_vici++;
            } else {
                hide_vici = 0;
                $('#search_wrap').show();
                $('.vici').css('width', '297px');
            }
        });

        var show_bus = 0;
        $('#js_searchBus').on('click',function(){
            if (show_bus ==0)
            {
                on_client('bus');
                $(this).children('span').css('background-position-y','-25px');
                show_bus = 1;
            }else {
                show_bus =0;
                clean_on_client('bus');
                $(this).children('span').css('background-position-y','0px');
            }
        });
        var show_subway =0;
        $('#js_searchSubway').on('click',function(){
            if (show_subway ==0)
            {
                on_client('subway');
                $(this).children('span').css('background-position-y','-25px');
                show_subway = 1;
            }else {
                show_subway =0;
                clean_on_client('subway');
                $(this).children('span').css('background-position-y','0px');
            }
        });
        var show_school =0;
        $('#js_searchSchool').on('click',function(){
            if (show_school ==0)
            {
                on_client('school');
                $(this).children('span').css('background-position-y','-25px');
                show_school = 1;
            }else {
                show_school =0;
                clean_on_client('school');
                $(this).children('span').css('background-position-y','0px');
            }
        });
        var show_hospital =0;
        $('#js_searchHospital').on('click',function(){
            if (show_hospital ==0)
            {
                on_client('hospital');
                $(this).children('span').css('background-position-y','-25px');
                show_hospital = 1;
            }else {
                show_hospital =0;
                clean_on_client('hospital');
                $(this).children('span').css('background-position-y','0px');
            }
        });
        var show_bank =0;
        $('#js_searchBank').on('click',function(){
            if (show_bank ==0)
            {
                on_client('bank');
                $(this).children('span').css('background-position-y','-25px');
                show_bank = 1;
            }else {
                show_bank =0;
                clean_on_client('bank');
                $(this).children('span').css('background-position-y','0px');
            }
        });
        var show_shop =0;
        $('#js_searchShop').on('click',function(){
            if (show_shop ==0)
            {
                on_client('shop');
                $(this).children('span').css('background-position-y','-25px');
                show_shop = 1;
            }else {
                show_shop =0;
                clean_on_client('shop');
                $(this).children('span').css('background-position-y','0px');
            }
        });
        var show_house =0;
        $('#js_searchHouse').on('click',function(){
            if (show_house ==0)
            {
                on_client('house');
                $(this).children('span').css('background-position-y','-25px');
                show_house = 1;
            }else {
                show_house =0;
                clean_on_client('house');
                $(this).children('span').css('background-position-y','0px');
            }
        });
        //这里实现对周边进行调用
        function on_client(type){
            //对所有的点击进行抽象
            searchnear(type, 20, 20);//实现对类型查询的过程
            //alert(type);
        }

        function searchnear(type, count, limit_count){

            var searchname = search_arr[type];
            cleanTypeMarker(type);
            var onLocalSearch = function(resData){
                // 判断状态是否正确
                if (localSearch.getStatus() == BMAP_STATUS_SUCCESS){
                    var result;
                    var resultArr = [];
                    //处理百度返回信息
                    for (var i = 0; i < resData.getCurrentNumPois(); i ++){
                        var info = resData.getPoi(i);
                        //过滤地铁中的地铁口
                        info['address'] = info['address']?info['address']:'';
                        if("subway" == type && info['address'].indexOf("线") < 0) continue;
                        //计算距离
                        resultArr.push(info);
                    }
                    resData._pois = resultArr;
                    var l = resData._pois.length;
                    if(l > 0){

                        for (var i = 0; i < l && i < limit_count; i ++){
                            result = resData.getPoi(i);
                            var marker = addMarker(result,type);
                            search_arr_marker[type].push(marker);
                        }
                        $('#'+type+'_icon').css('background-position-y','-25px');
                    }else{
                        showPrompt('当前区域暂无'+searchname+'信息');//显示的内容的方法并未声明
                        $('#'+type+'_icon').css('background-position-y','0');
                    }
                }else{
                    showPrompt('当前区域暂无'+searchname+'信息');
                    $('#'+type+'_icon').css('background-position-y','0');
                }
            };
            var localSearch = new BMap.LocalSearch(map, {onSearchComplete:onLocalSearch});//这里调用查询localsearch是一个异步过程，需要调用一次回调函数
            localSearch.setPageCapacity(count);
            localSearch.searchInBounds(searchname, map.getBounds());
        }

        //这里实现对整个search的重写
        function cleanTypeMarker(type){
            if(search_arr_marker[type] == null){
                search_arr_marker[type] = [];
                return;
            }
            for(var i = 0,l=search_arr_marker[type].length;i<l;i++){
                map.removeOverlay(search_arr_marker[type][i]);
            }
            search_arr_marker[type] = [];
            $('#'+type+'_icon').css('background-position-y','0');
            closeTip();
        }
        function getTypeImg(type) {
            var i = icon_arr[type];
            return {url:'http://192.168.1.234/Public/img/Home/Map/'+i+'.png', size:new BMap.Size(17,24), anchor:new BMap.Size(0, -24)};
        }
        function  addMarker (info, type){
            var markerInfo = getTypeImg(type);
            var myIcon = new BMap.Icon(markerInfo.url,markerInfo.size);
            var marker = new BMap.Marker(new BMap.Point(info.point.lng,info.point.lat), {icon: myIcon});
            map.addOverlay(marker);
            marker.provalue = info;
            openTip[info.uid] = opentip(marker);
            return marker;
        }
        function closeTip(){
            $('#maptip').hide();
        }

        var isclick;
        function opentip(marker, type) {
            var opentheTip = function(){
                //这里加详情节点
                var info = marker.provalue;
                if(!info) return;
                if(isclick && isclick == info.uid){
                    closeTip();
                    return;
                }
                isclick = info.uid;
                markerNow = marker;
                var node = $('#maptip');
                node.html(templateFetch($('#searchDetail').val(), info));
                node.show();
                var pixel = map.pointToPixel(marker.provalue.point);
                node.css('left', pixel.x+'px');
                node.css('top', pixel.y+'px');
            };
            marker.addEventListener('click', opentheTip);
            return opentheTip;
        }

        function  templateFetch(str, obj) {
            var retval = str;
            //其实是顺次对 str 执行正则表达式的替换
            for (var i in obj){
                var re = new RegExp('\\{'+i+'\\}', 'g');
                retval = retval.replace(re, obj[i]);
            }
            return retval;
        }

        //用来显示提示信息
        function showPrompt(msg){
            if (msg)
            {
                $('#show_msg').css('display','block');
            }
            $('#prompt').html(msg);
            //$('#prompt').slideDown();
            var up = function(){
                // $('#prompt').slideUp();
                $('#show_msg').css('display','none');
            };
            setTimeout(up,3000);
        }
        function clean_on_client(type){
            cleanTypeMarker(type);
        }
    })(Zepto);


</script>

</body>
</html>